<template>
<div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        :default-active="route.path"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router="true"
        style="height: 99vh;"
        v-model:collapse="isCollapse"
      >
        <el-menu-item index="/nav/page1">
          <el-icon><setting /></el-icon>
          <span>代码故障定位</span>
        </el-menu-item>
        <el-menu-item index="/nav/page2">
          <el-icon><setting /></el-icon>
          <span>源代码管理</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header> <el-icon style="width: 50px;height: 50px;position: relative;" size="30" @click="isCollapse=!isCollapse" :class="isCollapse?'expand':'no-expand'"><Expand size="50"/></el-icon></el-header>
        <el-main :class="isCollapse?'expand':'no-expand'"><router-view ></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Expand
} from '@element-plus/icons-vue'
import {ref} from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute();
const isCollapse=ref(false)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.expand{
    transform: translateX(-130px);
    transition: transform 0.5s ease;
}
.no-expand{
    transform: translateX(0);
    transition: transform 0.5s ease;
}
</style>